<template>
	<view class="container">
		<view class="bgContext">
			<view class="welcomeInfo">
				Hi, Rainard!<br />
				Wecome back !
			</view>
		</view>
		<view class="context">
			<view class="mainBtnGroup">
				<view
					v-for="(i, j) in navList"
					:key="i.id"
					class="mainBtn"
					:class="i.id === '2' ? 'centerMainBtn' : ''"
				>
					<view class="mainInner" @click="handleChildernBtnShow(j)"
						><uni-icons :type="i.icon" size="30" color="#fff"></uni-icons
					></view>
					<view>{{ i.title }}</view>
				</view>
			</view>
			<view class="childrenBtnGroup">
				<view
					v-for="item in navList[currentId].navTo"
					:key="item.id"
					@click="gonewHcp(item.path)"
					class="childrenBtn"
				>
					<uni-icons :type="item.icon" size="30" color="#4170FB"></uni-icons>
					<view>{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			currentId: 1
		};
	},
	created() {},
	computed: {
		...mapState(['navList'])
	},
	methods: {
		// 控制当前子菜单的显示
		handleChildernBtnShow(id) {
			this.currentId = id;
		},
		gonewHcp(path) {
			uni.navigateTo({
				url: path
			});
		}
	}
};
</script>

<style lang="scss">
page {
}
.container {
	height: 100%;
}
.bgContext {
	position: relative;
	height: 70%;
	width: 100%;
	background: url(../../static/airplane.jpg) no-repeat;
	background-size: 100% 100%;
	clip-path: ellipse(164% 100% at 50% 0%);
	.welcomeInfo {
		position: absolute;
		bottom: 100px;
		z-index: 10;
		padding-left: 20px;
		font-size: 30px;
		font-family: Arial-Black, Arial;
		font-weight: 900;
		color: #ffffff;
	}
}
.context {
	height: 30%;
	width: 100%;
	.mainBtnGroup {
		position: relative;
		top: -45px;
		width: 100%;
		display: flex;
		.mainBtn {
			width: 33%;
			text-align: center;
			font-size: 14px;
			font-weight: 400;
			color: #343434;
			line-height: 24px;
			.mainInner {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				width: 64px;
				height: 64px;
				border-radius: 50%;
				margin: 0 auto;
				background: linear-gradient(139deg, #68abe5 0%, #014099 100%);
			}
		}
		.centerMainBtn {
			position: relative;
			top: 8px;
			.mainInner {
				width: 78px;
				height: 78px;
			}
		}
	}
	.childrenBtnGroup {
		width: 100%;
		display: flex;
		margin-top: 15px;
		.childrenBtn {
			width: 33%;
			text-align: center;
			font-size: 12px;
			font-weight: 400;
			color: #343434;
			line-height: 24px;
		}
	}
}
</style>
